<template>
  <div id="post-page">
    <div id="post-page-toolbar">
      <h2>动态列表</h2>
      <a-switch v-model:checked="departmentOnly" checked-children="部门" un-checked-children="所有" />
    </div>
    <SendPostOrReplyComponent @on-post="handlePostPost"></SendPostOrReplyComponent>
    <div class="post-card-list">
      <PostCard
        class="post-card"
        :key="post.id"
        v-for="post in postList"
        :avater="post.postStaff.avater"
        :name="post.postStaff.name"
        :time="post.createTime"
        :update-time="post.updateTime"
        :post-message="post.message"
        :type="post.type"
        :resources="post.resources"
        :reply-count="post.replyCount"
        :like-count="post.likeCount"
        :dose-i-liked-it="post.doseILikedIt"
        @delete-post="handleDeletePost(post.id)"
        @enter-post="handleEnterPost(post)"
        @send-reply="openReplyModal(post)"
        @like-post="handleLikePost(post)"
        @unlike-post="handleUnlikePost(post)"
      ></PostCard>
    </div>
    <HoverToLoadingComponent :is-fetching-list="isFetchingList" :no-more="noMore" @on-hover="fetch"></HoverToLoadingComponent>
    <a-modal v-model:visible="isReplyModalShow" title="发布回复" :footer="null">
      <SendPostOrReplyComponent :has-operations-bar="false" place-holder="发布回复..." @on-post="({message}) => handlePostReply(null, message)"></SendPostOrReplyComponent>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
import PostCard from '@/components/public/PostCard.vue';
import SendPostOrReplyComponent from '@/components/public/SendPostOrReplyComponent.vue';
import HoverToLoadingComponent from '@/components/public/HoverToLoadingComponent.vue';
import { onMounted, ref } from 'vue';
import useReplyModal from '@/composable/reply-modal';
import usePostApi from '@composable/post-api';
import { useRouter } from 'vue-router';

// Post相关
const { fetch, departmentOnly, isFetchingList, postList, noMore, handlePostPost, handleDeletePost, handleLikePost, handleUnlikePost } = usePostApi();


onMounted(() => {
  fetch();
});

// Reply相关
const { openReplyModal, isReplyModalShow, handlePostReply } = useReplyModal(null, '/postreply');

const router = useRouter();

const handleEnterPost = (post) => {
  console.log('postpage: ', post);
  router.push({name: "lookpost", params: { post: JSON.stringify(post) }});
}
</script>

<style scoped>
#post-page {
  background-color: white;
  max-width: 600px;
  margin: 0 auto;
  border: #eee 0.5px solid;
}
.post-card:first-child {
  border-top: #eee 0.5px solid;
}

#post-page-toolbar h2 {
  margin: 0;
  flex: 1;
}

#post-page-toolbar {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 10px;
}


</style>